<!-- eslint-disable vue/valid-v-slot -->
<!-- eslint-disable vue/no-lone-template -->
<template>
  <div class="main-container">
    <a-tabs type="line" v-model="key" auto-switch @change="tabClick">
      <a-tab-pane title="池子列表" key="1">
        <TableBody>
          <template #header>
            <TableHeader ref="tableHeaderRef" :show-filter="false">
              <template #search-content>
                <a-form ref="forms" :model="form">
                  <a-row :gutter="24">
                    <a-col :span="4">
                      <a-form-item field="name" hide-label>
                        <a-input
                          v-model.trim="form.name"
                          class="width100"
                          placeholder="请输入共享池名称"
                          allow-clear
                        />
                      </a-form-item>
                    </a-col>
                    <a-col :span="4">
                      <a-form-item field="addTime" hide-label>
                        <a-date-picker
                          class="width100"
                          v-model="form.addTime"
                          show-time
                          :disabledDate="changeTraceEndUser"
                          placeholder="请选择开始创建时间"
                          :time-picker-props="{ defaultValue: '12:00:00' }"
                          format="YYYY-MM-DD HH:mm:ss"
                          :shortcuts="[
                            {
                              label: '今日',
                              value: () => (
                                (form.addTime = $dayjs('00:00:00', 'HH:mm:ss').format(
                                  'YYYY-MM-DD HH:mm:ss'
                                )),
                                (form.endTime = $dayjs('23:59:59', 'HH:mm:ss').format(
                                  'YYYY-MM-DD HH:mm:ss'
                                ))
                              ),
                            },
                            {
                              label: '昨日',
                              value: () => (
                                (form.addTime = $dayjs('00:00:00', 'HH:mm:ss')
                                  .subtract(1, 'day')
                                  .format('YYYY-MM-DD HH:mm:ss')),
                                (form.endTime = $dayjs('23:59:59', 'HH:mm:ss')
                                  .subtract(1, 'day')
                                  .format('YYYY-MM-DD HH:mm:ss'))
                              ),
                            },
                            {
                              label: '七日',
                              value: () => (
                                (form.addTime = $dayjs('00:00:00', 'HH:mm:ss')
                                  .subtract(7, 'day')
                                  .format('YYYY-MM-DD HH:mm:ss')),
                                (form.endTime = $dayjs('23:59:59', 'HH:mm:ss')
                                  .subtract(1, 'day')
                                  .format('YYYY-MM-DD HH:mm:ss'))
                              ),
                            },
                            {
                              label: '本月',
                              value: () => (
                                (form.addTime = $dayjs('01 00:00:00', 'DD HH:mm:ss').format(
                                  'YYYY-MM-DD HH:mm:ss'
                                )),
                                (form.endTime = $dayjs().format('YYYY-MM-DD HH:mm:ss'))
                              ),
                            },
                            {
                              label: '上月',
                              value: () => (
                                (form.addTime = $dayjs(`01 00:00:00`, 'DD HH:mm:ss')
                                  .subtract(1, 'month')
                                  .format('YYYY-MM-DD HH:mm:ss')),
                                (form.endTime = $dayjs()
                                  .subtract(1, 'month')
                                  .endOf('month')
                                  .format('YYYY-MM-DD HH:mm:ss'))
                              ),
                            },
                          ]"
                        />
                      </a-form-item>
                    </a-col>
                    <a-col :span="4">
                      <a-form-item field="endTime" hide-label>
                        <a-date-picker
                          class="width100"
                          v-model="form.endTime"
                          show-time
                          :disabledDate="changeTraceStartUser"
                          placeholder="请选择结束创建时间"
                          :time-picker-props="{ defaultValue: '12:00:00' }"
                          :shortcuts="[
                            {
                              label: '今日',
                              value: () => (
                                (form.addTime = $dayjs('00:00:00', 'HH:mm:ss').format(
                                  'YYYY-MM-DD HH:mm:ss'
                                )),
                                (form.endTime = $dayjs('23:59:59', 'HH:mm:ss').format(
                                  'YYYY-MM-DD HH:mm:ss'
                                ))
                              ),
                            },
                            {
                              label: '昨日',
                              value: () => (
                                (form.addTime = $dayjs('00:00:00', 'HH:mm:ss')
                                  .subtract(1, 'day')
                                  .format('YYYY-MM-DD HH:mm:ss')),
                                (form.endTime = $dayjs('23:59:59', 'HH:mm:ss')
                                  .subtract(1, 'day')
                                  .format('YYYY-MM-DD HH:mm:ss'))
                              ),
                            },
                            {
                              label: '七日',
                              value: () => (
                                (form.addTime = $dayjs('00:00:00', 'HH:mm:ss')
                                  .subtract(7, 'day')
                                  .format('YYYY-MM-DD HH:mm:ss')),
                                (form.endTime = $dayjs('23:59:59', 'HH:mm:ss')
                                  .subtract(1, 'day')
                                  .format('YYYY-MM-DD HH:mm:ss'))
                              ),
                            },
                            {
                              label: '本月',
                              value: () => (
                                (form.addTime = $dayjs('01 00:00:00', 'DD HH:mm:ss').format(
                                  'YYYY-MM-DD HH:mm:ss'
                                )),
                                (form.endTime = $dayjs().format('YYYY-MM-DD HH:mm:ss'))
                              ),
                            },
                            {
                              label: '上月',
                              value: () => (
                                (form.addTime = $dayjs(`01 00:00:00`, 'DD HH:mm:ss')
                                  .subtract(1, 'month')
                                  .format('YYYY-MM-DD HH:mm:ss')),
                                (form.endTime = $dayjs()
                                  .subtract(1, 'month')
                                  .endOf('month')
                                  .format('YYYY-MM-DD HH:mm:ss'))
                              ),
                            },
                          ]"
                        />
                      </a-form-item>
                    </a-col>
                    <a-col :span="4">
                      <a-form-item field="btns" hide-label>
                        <a-space :size="15">
                          <a-button type="primary" html-type="submit" @click="doRefresh(1)"
                            ><template #icon> <icon-search /> </template>搜索</a-button
                          >
                          <a-button @click="resetSeach"
                            ><template #icon>
                              <icon-sync theme="outline" size="14" />
                            </template>
                            <!-- Use the default slot to avoid extra spaces -->
                            <template #default>重置</template></a-button
                          >
                        </a-space>
                      </a-form-item>
                    </a-col>
                  </a-row>
                </a-form>
              </template>
            </TableHeader>
          </template>
          <template #table-config>
            <a-space :size="15">
              <a-button @click="addPoolFn" type="primary">
                <template #default>新建</template>
              </a-button>
              <a-button type="outline" @click="exportMyFn" :loading="loading">
                <template #default>导出</template>
              </a-button>
            </a-space>
            <a-space :size="15">
              <TableConfig
                @update-border="onUpdateBorder"
                @update-striped="onUpdateStriped"
                @refresh="doRefresh"
              />
            </a-space>
          </template>
          <template #default>
            <a-table
              :bordered="{ wrapper: true, cell: tables.bordered }"
              :stripe="(tables.striped as boolean)"
              :loading="tables.tableLoading"
              :data="tableColumns.list1"
              :pagination="false"
              :column-resizable="true"
              :rowKey="rowKey"
              :columns="tableColumns.list"
              table-layout-fixed
              hide-expand-button-on-empty
              :default-expand-all-rows="true"
              :scroll="{ x: 1200 }"
              :scrollbar="{ type: 'track', outerClass: '', outerStyle: '' }"
            >
              <template #columns>
                <a-table-column
                  v-for="item of tableColumns.list"
                  :key="item.key"
                  align="left"
                  :title="(item.title as string)"
                  :width="item.width"
                  :data-index="(item.key as string)"
                  :fixed="item.fixed"
                  :ellipsis="true"
                  :tooltip="true"
                >
                  <template v-if="item.key === 'button'" #cell="{ record }">
                    <a-space>
                      <a-button type="text" @click="editPoolFn(record)">编辑</a-button>
                      <a-button type="text" status="danger" @click="delPoolFn(record)"
                        >删除</a-button
                      >
                    </a-space>
                  </template>
                  <template v-if="item.key === 'user'" #cell="{ record }">
                    {{ record.user.userName }}
                  </template>
                  <template v-if="item.key === 'cardNumber'" #cell="{ record }">
                    {{ record.cardNumber }}张
                  </template>
                  <template v-if="item.key === 'amount'" #cell="{ record }">
                    {{ record.amount }}元
                  </template>
                  <template v-if="item.key === 'cardUsedNumber'" #cell="{ record }">
                    {{ record.cardUsedNumber }}张
                  </template>
                  <template v-if="item.key === 'cardRealName'" #cell="{ record }">
                    {{ record.cardRealName }}张
                  </template>
                  <template v-if="item.key === 'series'" #cell="{ record }">
                    {{ record.series.name }}
                  </template>
                  <template v-if="item.key === 'used'" #cell="{ record }">
                    {{ Math.floor((record.used / 1024) * 100) / 100 }}G
                  </template>
                  <template v-if="item.key === 'consumption'" #cell="{ record }">
                    {{ Math.floor((record.consumption / 1024) * 100) / 100 }}G
                  </template>

                  <template v-if="item.key === 'total'" #cell="{ record }">
                    <span v-if="record.total">
                      {{ Math.floor((record.total / 1024) * 100) / 100 }}G</span
                    >
                    <span v-else>- - -</span>
                  </template>

                  <template v-if="item.key === 'free'" #cell="{ record }">
                    <span v-if="record.total">
                      {{ Math.floor(((record.total - record.used) / 1024) * 100) / 100 }}G</span
                    >
                    <span v-else>- - -</span>
                  </template>
                </a-table-column>
              </template>
            </a-table>
          </template>
          <template #footer>
            <TableFooter ref="tableFooterRef" :pagination="pagination" />
          </template>
        </TableBody>
      </a-tab-pane>
      <a-tab-pane title="出账记录" key="2">
        <TableBody>
          <template #header>
            <TableHeader ref="tableHeaderRef" :show-filter="false">
              <template #search-content>
                <a-form ref="reForms" :model="reForm">
                  <a-row :gutter="24">
                    <a-col :span="4">
                      <a-form-item field="type" hide-label>
                        <a-select
                          class="width100"
                          v-model="reForm.type"
                          placeholder="请选择短信类型"
                          allow-clear
                        >
                          <a-option v-for="item in type" :key="item.type" :value="item.type">{{
                            item.name
                          }}</a-option>
                        </a-select>
                      </a-form-item>
                    </a-col>

                    <a-col :span="4">
                      <a-form-item field="addTime" hide-label>
                        <a-date-picker
                          class="width100"
                          v-model="reForm.addTime"
                          show-time
                          :disabledDate="changeTraceEndUser"
                          placeholder="请选择开始充值时间"
                          :time-picker-props="{ defaultValue: '12:00:00' }"
                          format="YYYY-MM-DD HH:mm:ss"
                          :shortcuts="[
                            {
                              label: '今日',
                              value: () => (
                                (reForm.addTime = $dayjs('00:00:00', 'HH:mm:ss').format(
                                  'YYYY-MM-DD HH:mm:ss'
                                )),
                                (reForm.endTime = $dayjs('23:59:59', 'HH:mm:ss').format(
                                  'YYYY-MM-DD HH:mm:ss'
                                ))
                              ),
                            },
                            {
                              label: '昨日',
                              value: () => (
                                (reForm.addTime = $dayjs('00:00:00', 'HH:mm:ss')
                                  .subtract(1, 'day')
                                  .format('YYYY-MM-DD HH:mm:ss')),
                                (reForm.endTime = $dayjs('23:59:59', 'HH:mm:ss')
                                  .subtract(1, 'day')
                                  .format('YYYY-MM-DD HH:mm:ss'))
                              ),
                            },
                            {
                              label: '七日',
                              value: () => (
                                (reForm.addTime = $dayjs('00:00:00', 'HH:mm:ss')
                                  .subtract(7, 'day')
                                  .format('YYYY-MM-DD HH:mm:ss')),
                                (reForm.endTime = $dayjs('23:59:59', 'HH:mm:ss')
                                  .subtract(1, 'day')
                                  .format('YYYY-MM-DD HH:mm:ss'))
                              ),
                            },
                            {
                              label: '本月',
                              value: () => (
                                (reForm.addTime = $dayjs('01 00:00:00', 'DD HH:mm:ss').format(
                                  'YYYY-MM-DD HH:mm:ss'
                                )),
                                (reForm.endTime = $dayjs().format('YYYY-MM-DD HH:mm:ss'))
                              ),
                            },
                            {
                              label: '上月',
                              value: () => (
                                (reForm.addTime = $dayjs(`01 00:00:00`, 'DD HH:mm:ss')
                                  .subtract(1, 'month')
                                  .format('YYYY-MM-DD HH:mm:ss')),
                                (reForm.endTime = $dayjs()
                                  .subtract(1, 'month')
                                  .endOf('month')
                                  .format('YYYY-MM-DD HH:mm:ss'))
                              ),
                            },
                          ]"
                        />
                      </a-form-item>
                    </a-col>
                    <a-col :span="4">
                      <a-form-item field="endTime" hide-label>
                        <a-date-picker
                          class="width100"
                          v-model="reForm.endTime"
                          show-time
                          :disabledDate="changeTraceStartUser"
                          placeholder="请选择结束充值时间"
                          :time-picker-props="{ defaultValue: '12:00:00' }"
                          :shortcuts="[
                            {
                              label: '今日',
                              value: () => (
                                (reForm.addTime = $dayjs('00:00:00', 'HH:mm:ss').format(
                                  'YYYY-MM-DD HH:mm:ss'
                                )),
                                (reForm.endTime = $dayjs('23:59:59', 'HH:mm:ss').format(
                                  'YYYY-MM-DD HH:mm:ss'
                                ))
                              ),
                            },
                            {
                              label: '昨日',
                              value: () => (
                                (reForm.addTime = $dayjs('00:00:00', 'HH:mm:ss')
                                  .subtract(1, 'day')
                                  .format('YYYY-MM-DD HH:mm:ss')),
                                (reForm.endTime = $dayjs('23:59:59', 'HH:mm:ss')
                                  .subtract(1, 'day')
                                  .format('YYYY-MM-DD HH:mm:ss'))
                              ),
                            },
                            {
                              label: '七日',
                              value: () => (
                                (reForm.addTime = $dayjs('00:00:00', 'HH:mm:ss')
                                  .subtract(7, 'day')
                                  .format('YYYY-MM-DD HH:mm:ss')),
                                (reForm.endTime = $dayjs('23:59:59', 'HH:mm:ss')
                                  .subtract(1, 'day')
                                  .format('YYYY-MM-DD HH:mm:ss'))
                              ),
                            },
                            {
                              label: '本月',
                              value: () => (
                                (reForm.addTime = $dayjs('01 00:00:00', 'DD HH:mm:ss').format(
                                  'YYYY-MM-DD HH:mm:ss'
                                )),
                                (reForm.endTime = $dayjs().format('YYYY-MM-DD HH:mm:ss'))
                              ),
                            },
                            {
                              label: '上月',
                              value: () => (
                                (reForm.addTime = $dayjs(`01 00:00:00`, 'DD HH:mm:ss')
                                  .subtract(1, 'month')
                                  .format('YYYY-MM-DD HH:mm:ss')),
                                (reForm.endTime = $dayjs()
                                  .subtract(1, 'month')
                                  .endOf('month')
                                  .format('YYYY-MM-DD HH:mm:ss'))
                              ),
                            },
                          ]"
                        />
                      </a-form-item>
                    </a-col>
                    <a-col :span="4">
                      <a-form-item field="btns" hide-label>
                        <a-space :size="15">
                          <a-button type="primary" html-type="submit" @click="doRefreshRe(1)"
                            ><template #icon> <icon-search /> </template>搜索</a-button
                          >
                          <a-button @click="resetRe"
                            ><template #icon>
                              <icon-sync theme="outline" size="14" />
                            </template>
                            <!-- Use the default slot to avoid extra spaces -->
                            <template #default>重置</template></a-button
                          >
                        </a-space>
                      </a-form-item>
                    </a-col>
                  </a-row>
                </a-form>
              </template>
            </TableHeader>
          </template>
          <template #table-config>
            <a-space :size="15">
              <a-button type="outline" @click="exportReFn" :loading="loading">
                <!-- Use the default slot to avoid extra spaces -->
                <template #default>导出</template>
              </a-button>
            </a-space>
            <a-space :size="15">
              <TableConfig
                @update-border="onUpdateBorder"
                @update-striped="onUpdateStriped"
                @refresh="doRefreshRe(1)"
              />
            </a-space>
          </template>
          <template #default>
            <a-table
              :bordered="{ wrapper: true, cell: tables.bordered }"
              :stripe="(tables.striped as boolean)"
              :loading="tables.tableLoading"
              :data="tableColumns.list2"
              :pagination="false"
              :column-resizable="true"
              :rowKey="rowKey"
              :columns="tableColumns.userList"
              table-layout-fixed
              hide-expand-button-on-empty
              :default-expand-all-rows="true"
            >
              <template #columns>
                <a-table-column
                  v-for="item of tableColumns.userList"
                  :key="item.key"
                  align="left"
                  :title="(item.title as string)"
                  :width="item.width"
                  :data-index="(item.key as string)"
                  :fixed="item.fixed"
                  :ellipsis="true"
                  :tooltip="true"
                >
                  <template v-if="item.key === 'button'" #cell="{ record }">
                    <a-space>
                      <a-button type="text" @click="handleClickInfo(record.error)">编辑</a-button>
                      <a-button type="text" status="danger">删除</a-button>
                    </a-space>
                  </template>
                </a-table-column>
              </template>
            </a-table>
          </template>
          <template #footer>
            <TableFooter ref="tableFooterRef" :pagination="paginations" />
          </template>
        </TableBody>
      </a-tab-pane>
    </a-tabs>
    <a-modal
      :title="titleModel"
      width="600px"
      title-align="start"
      :mask-closable="false"
      v-model:visible="poolVisible"
      @before-close="beforeCloseFn"
    >
      <a-form :model="poolDetail" ref="poolRef" :auto-label-width="true">
        <a-form-item field="mode" label="池子模式">
          <a-radio-group class="radio-bcg" v-model="poolDetail.mode">
            <a-radio :value="0">
              <template #radio="{ checked }">
                <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                  <div className="custom-radio-card-mask">
                    <div className="custom-radio-card-mask-dot"></div> </div
                  ><div className="custom-radio-card-title">单G计算【无低消】</div>
                </div>
              </template>
            </a-radio>
            <a-radio :value="1">
              <template #radio="{ checked }">
                <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                  <div className="custom-radio-card-mask">
                    <div className="custom-radio-card-mask-dot"></div> </div
                  ><div className="custom-radio-card-title">单卡低消</div>
                </div>
              </template>
            </a-radio>
            <a-radio :value="2">
              <template #radio="{ checked }">
                <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                  <div className="custom-radio-card-mask">
                    <div className="custom-radio-card-mask-dot"></div> </div
                  ><div className="custom-radio-card-title">共享低消</div>
                </div>
              </template>
            </a-radio>
          </a-radio-group>
          <template #extra>
            <div
              >单卡低消：每个卡流量必须达到指定用量，达不到按照指定用量出账；共享低消：所有出账卡
              平均达到指定低消，达不到按照指定低消出账</div
            >
          </template>
        </a-form-item>
        <a-form-item
          field="userId"
          label="所属客户"
          :rules="[{ required: true, message: '所属客户不能为空' }]"
          :validate-trigger="['change', 'input']"
          asterisk-position="end"
        >
          <a-select
            allow-search
            v-model="poolDetail.userId"
            placeholder="请选择所属客户"
            allow-clear
            :options="userList"
            :virtual-list-props="{ height: 200 }"
          />
        </a-form-item>
        <a-form-item
          field="seriesId"
          label="所属系列"
          :rules="[{ required: true, message: '所属系列不能为空' }]"
          :validate-trigger="['change', 'input']"
          asterisk-position="end"
        >
          <a-select
            v-model="poolDetail.seriesId"
            placeholder="请选择所属系列"
            allow-clear
            allow-search
            @change="seriesFn"
          >
            <a-option v-for="(item, index) in series" :key="index" :value="item.id">{{
              item.name
            }}</a-option>
          </a-select>
        </a-form-item>
        <a-form-item
          field="name"
          label="池子名称"
          :rules="[{ required: true, message: '池子名称不能为空' }]"
          :validate-trigger="['change', 'input']"
          asterisk-position="end"
        >
          <a-input v-model="poolDetail.name" placeholder="请输入池子名称" />
        </a-form-item>
        <a-form-item
          field="amount"
          label="单G价格"
          :rules="[{ required: true, message: '单G价格不能为空' }]"
          :validate-trigger="['change', 'input']"
          asterisk-position="end"
        >
          <a-input-number v-model="poolDetail.amount" placeholder="请输入单G价格" />
        </a-form-item>
        <a-form-item
          field="consumption"
          label="流量低消(M)"
          :rules="[{ required: true, message: '流量低消不能为空' }]"
          :validate-trigger="['change', 'input']"
          asterisk-position="end"
        >
          <a-input-number v-model="poolDetail.consumption" placeholder="请输入流量低消">
            <template #append>
              <a-button type="primary" @click="change1024(poolDetail.consumption, 1)">
                换算
              </a-button>
            </template>
          </a-input-number>
        </a-form-item>
        <a-form-item field="total" label="总流量(M)">
          <a-input-number v-model="poolDetail.total" placeholder="请输入总流量">
            <template #append>
              <a-button type="primary" @click="change1024(poolDetail.total, 2)"> 换算 </a-button>
            </template>
          </a-input-number>
        </a-form-item>
        <a-form-item
          field="operation"
          label="超套操作"
          :rules="[{ required: true, message: '超套操作不能为空' }]"
          :validate-trigger="['change', 'input']"
          asterisk-position="end"
        >
          <a-checkbox-group class="radio-bcg" v-model="poolDetail.operation">
            <a-checkbox :value="0">禁止调用接口</a-checkbox>
            <a-checkbox :value="1">停机所有卡</a-checkbox>
          </a-checkbox-group>
        </a-form-item>
      </a-form>
      <template #footer>
        <a-space v-if="poolDetail.id">
          <a-button @click="beforeCloseFn">取消</a-button>
          <a-button type="primary" @click="confirmFn">确定</a-button>
        </a-space>
        <div v-else style="display: flex; justify-content: space-between; width: 100%">
          <a-checkbox v-model="addChecked">继续新建下一个共享池</a-checkbox>
          <a-space>
            <a-button @click="beforeCloseFn">取消</a-button>
            <a-button type="primary" @click="confirmFn">确定</a-button>
          </a-space>
        </div>
      </template>
    </a-modal>
  </div>
</template>

<script lang="ts" setup>
  import { reNote, sendNote, exportRe, exportMy, getCertificationList } from '@/api/url'

  import useCommonStore from '@/store/modules/common'

  import { get, post } from '@/api/http'
  import { usePagination, useRowKey, useTable } from '@/hooks/table'
  import { onMounted, reactive, ref } from 'vue'

  import _ from 'lodash-es'
  import { Message, Modal } from '@arco-design/web-vue'

  const table = useTable()
  function change1024(val: any, val1: any) {
    if (val1 == 1) {
      poolDetail.value.consumption = val * 1024
    } else if (val1 == 2) {
      poolDetail.value.total = val * 1024
    }
  }
  function seriesFn(val: any) {
    series.value.forEach((item: any) => {
      if (item.id == val) {
        if (item.operationMode == 1) {
          poolDetail.value.mode = 0
        }
      }
    })
  }
  const pagination = usePagination(doRefresh)
  const paginations = usePagination(doRefreshRe)
  const paginationse = usePagination(doRefreshSend)
  const paginations1 = usePagination(doRefreshSends)
  const type: any = ref([])
  const textType: any = ref([])

  const forms = ref()

  const reForms = ref()
  const sendForms = ref()

  const loading = ref(false)

  const key = ref('1')

  const useCommon = useCommonStore()
  //编辑/修改共享池
  const poolVisible = ref(false)
  const titleModel = ref('新建共享池')
  //共享池详情
  const poolDetail: any = ref({
    /**
     * 用户ID
     */
    userId: '',
    /**
     * 系列ID
     */
    seriesId: '',
    /**
     * 模式 0单G结算 1单卡抵消 2共享抵消
     */
    mode: 0,
    /**
     * 名称
     */
    name: '',
    /**
     * 单G价格
     */
    amount: '',
    /**
     * 抵消单位M
     */
    consumption: '',
    /**
     * 总流量单位M
     */
    total: '',
    /**
     * 0禁止调用接口 1停机所有卡
     */
    operation: '',
  })
  const poolRef = ref()
  const addChecked = ref(false)
  //新建共享池
  function addPoolFn() {
    getList()
    getSeries()
    addChecked.value = false
    poolVisible.value = true
    poolDetail.value.id = ''
  }
  //编辑共享池
  function editPoolFn(val: any) {
    getList()
    getSeries()
    poolDetail.value = JSON.parse(JSON.stringify(val))
    poolVisible.value = true
  }
  //删除共享池
  function delPoolFn(val: any) {
    Modal.warning({
      title: '操作确认',
      content: '确定要删除此共享池吗？',
      cancelText: '取消',
      titleAlign: 'start',
      hideCancel: false,
      okText: '删除',
      onOk: () => {
        get({
          url: '/app/series/poll/delete',
          data: () => {
            return {
              id: val.id,
            }
          },
        })
          .then((res) => {
            if (res.code == 0) {
              Message.success(res.msg)
              doRefresh()
            } else {
              Message.error(res.msg)
            }
          })
          .catch(console.log)
      },
    })
  }
  //共享池确认
  function confirmFn() {
    poolRef.value?.validate().then((error: any) => {
      if (!error) {
        post({
          url: '/app/series/poll/set',
          data: {
            ...poolDetail.value,
          },
        }).then((res) => {
          Message.success(res.msg)
          if (addChecked.value == true) {
            addChecked.value = false
          } else {
            poolVisible.value = false
          }
          poolDetail.value.id = null
          poolRef.value?.resetFields()
          doRefresh()
        })
      }
    })
  }
  //共享池弹窗关闭
  function beforeCloseFn() {
    poolRef.value.resetFields()
    addChecked.value = false
    poolVisible.value = false
    poolDetail.value.id = ''
  }
  //客户列表
  const userList: any = ref([])
  //获取客户列表
  function getList() {
    useCommon.userLists().then((res: any) => {
      userList.value = res.data
    })
  }
  //系列列表
  const series: any = ref([])
  //获取系列
  function getSeries() {
    series.value = []
    useCommon.seriess().then((res: any) => {
      res.data.forEach((item: any) => {
        if (item.operationMode && item.operationMode == 1) {
          series.value.push(item)
        }
      })
    })
  }
  const form = reactive({
    name: '', //共享池名称
    addTime: '',
    endTime: '',
  })

  const reForm = reactive({
    type: '',
    addTime: '',
    endTime: '',
  })

  const sendForm = reactive({
    phone: '',
    type: '',
    addTime: '',
    endTime: '',
  })

  const sendForm1 = reactive({
    name: '',
    phone: '',
    idCard: '',
    state: '',
    addTime: '',
    endTime: '',
  })

  const tables = reactive({
    tableLoading: false,
    bordered: false,
    striped: false,
    expand: [1],
    isExpand: false,
  })

  const tableColumns: any = reactive({
    list1: [],
    list2: [],
    list3: [],
    list4: [],
    list: [
      {
        title: '池子ID',
        key: 'id',
        dataIndex: 'id',
        align: 'center',
        checked: true,
        width: 80,
      },
      {
        title: '共享池名称',
        key: 'name',
        dataIndex: 'name',
        align: 'center',
        checked: true,
        width: 200,
      },
      {
        title: '客户账号',
        key: 'user',
        dataIndex: 'user',
        align: 'center',
        checked: true,
        width: 170,
      },
      {
        title: '所属系列',
        key: 'series',
        dataIndex: 'series',
        align: 'center',
        checked: true,
        width: 170,
      },
      {
        title: '卡板数量',
        key: 'cardNumber',
        dataIndex: 'cardNumber',
        align: 'center',
        checked: true,
        width: 120,
      },
      {
        title: '在用数量',
        key: 'cardUsedNumber',
        dataIndex: 'cardUsedNumber',
        align: 'center',
        checked: true,
        width: 120,
      },
      {
        title: '新增实名',
        key: 'cardRealName',
        dataIndex: 'cardRealName',
        align: 'center',
        checked: true,
        width: 120,
      },

      {
        title: '流量单价',
        key: 'amount',
        dataIndex: 'amount',
        align: 'center',
        checked: true,
        width: 120,
      },
      {
        title: '总流量',
        key: 'total',
        dataIndex: 'total',
        align: 'center',
        checked: true,
        width: 120,
      },
      {
        title: '已用流量',
        key: 'used',
        dataIndex: 'used',
        align: 'center',
        checked: true,
        width: 120,
      },
      {
        title: '剩余流量',
        key: 'free',
        dataIndex: 'free',
        align: 'center',
        checked: true,
        width: 120,
      },
      {
        title: '流量低消',
        key: 'consumption',
        dataIndex: 'consumption',
        align: 'center',
        checked: true,
        width: 120,
      },
      {
        title: '预估费用',
        key: 'templateText',
        dataIndex: 'templateText',
        align: 'center',
        checked: true,
        width: 120,
      },
      {
        title: '创建时间',
        key: 'createTime',
        dataIndex: 'createTime',
        align: 'center',
        checked: true,
        width: 190,
      },
      {
        title: '操作',
        key: 'button',
        dataIndex: 'button',
        align: 'center',
        fixed: 'right',
        checked: true,
        width: 150,
      },
    ],
    userList: [
      {
        title: '所属代理',
        key: 'smsMerchandiseName',
        dataIndex: 'smsMerchandiseName',
        align: 'center',
        checked: true,
        width: 100,
      },
      {
        title: '共享池名称',
        key: 'smsMerchandiseName',
        dataIndex: 'smsMerchandiseName',
        align: 'center',
        checked: true,
        width: 100,
      },
      {
        title: '所属系列',
        key: 'systemOrderNumber',
        dataIndex: 'systemOrderNumber',
        align: 'center',
        checked: true,
        width: 100,
      },
      {
        title: '卡板数量',
        key: 'smsNumber',
        dataIndex: 'smsNumber',
        align: 'center',
        checked: true,
        width: 100,
      },
      {
        title: '使用流量',
        key: 'number',
        dataIndex: 'number',
        align: 'center',
        checked: true,
        width: 100,
      },
      {
        title: '出账金额',
        key: 'money',
        dataIndex: 'money',
        align: 'center',
        checked: true,
        width: 100,
      },
      {
        title: '生成时间',
        key: 'createTime',
        dataIndex: 'createTime',
        align: 'center',
        checked: true,
        width: 190,
      },
      {
        title: '操作',
        key: 'button',
        dataIndex: 'button',
        align: 'center',
        fixed: 'right',
        checked: true,
        width: 190,
      },
    ],
  })

  const rowKey = useRowKey('id')

  const tabClick = (val: string | number) => {
    loading.value = false
    if (val == '2') {
      // userLists()
      doRefreshRe(1)
      // getTableDepartmentsUser()
    } else if (val == '1') {
      doRefresh(1)
    } else if (val == '3') {
      doRefreshSend(1)
    } else {
      doRefreshSends(1)
    }
  }

  const resetRe = () => {
    reForms.value.resetFields()
    doRefresh(1)
  }

  const resetSeach = () => {
    forms.value.resetFields()
    doRefresh(1)
  }

  const handleClickInfo = (val: any) => {
    Modal.error({
      title: '错误报文',
      content: val,
    })
  }

  const exportMyFn = () => {
    loading.value = true
    useCommon
      .downLoads(exportMy, form, '我的短信列表')
      .then(() => {
        loading.value = false
      })
      .catch(() => {
        loading.value = false
      })
  }

  const exportReFn = () => {
    loading.value = true
    useCommon
      .downLoads(exportRe, reForm, '充值记录')
      .then(() => {
        loading.value = false
      })
      .catch(() => {
        loading.value = false
      })
  }

  //共享池列表
  function doRefresh(value?: number) {
    tables.tableLoading = true
    if (value) {
      pagination.page = value
    }
    get({
      url: '/app/series/poll/get/list',
      data: {
        ...form,
        page: pagination.page,
        size: pagination.pageSize,
      },
    }).then((res) => {
      tables.tableLoading = false
      tableColumns.list1 = res.data.list
      pagination.setTotalSize((res.data as any).totalSize)
      return res.data.list
    })
  }

  //充值短信列表
  function doRefreshRe(value?: number) {
    tables.tableLoading = true
    if (value) {
      pagination.page = value
    }
    get({
      url: reNote,
      data: {
        ...reForm,
        page: pagination.page,
        size: pagination.pageSize,
      },
    }).then((res) => {
      tables.tableLoading = false
      tableColumns.list2 = res.data.list
      paginations1.setTotalSize((res.data as any).totalSize)
      return res.data.list
    })
  }

  //国政通列表
  function doRefreshSends(value?: number) {
    tables.tableLoading = true
    if (value) {
      pagination.page = value
    }
    get({
      url: getCertificationList,
      data: {
        ...sendForm1,
        page: pagination.page,
        size: pagination.pageSize,
      },
    }).then((res) => {
      tables.tableLoading = false
      tableColumns.list4 = res.data.list
      paginations.setTotalSize((res.data as any).totalSize)
      return res.data.list
    })
  }
  //发送短信列表
  function doRefreshSend(value?: number) {
    tables.tableLoading = true
    if (value) {
      pagination.page = value
    }
    get({
      url: sendNote,
      data: {
        ...sendForm,
        page: pagination.page,
        size: pagination.pageSize,
      },
    }).then((res) => {
      res.data.list.forEach((item: any) => {
        textType.value.forEach((items: any) => {
          if (item.smsType === items.id) {
            item.name = items.templateTypeName
          }
        })
      })
      tables.tableLoading = false
      tableColumns.list3 = res.data.list
      paginationse.setTotalSize((res.data as any).totalSize)
      return res.data.list
    })
  }

  //客户重置
  const resetSend = () => {
    sendForms.value.resetFields()
    doRefreshSend(1)
  }
  const sendFormss = ref()
  //客户重置
  const resetSends = () => {
    sendFormss.value.resetFields()
    doRefreshSends(1)
  }

  function onUpdateBorder(isBordered: boolean) {
    tables.bordered = isBordered
  }

  function onUpdateStriped(isStriped: boolean) {
    tables.striped = isStriped
  }

  // //跟踪API开始时间限制结束时间
  // function changeTraceEnd(time: any) {
  //   return time.getTime() > new Date(form.endTime).getTime() //大于结束时间的不选
  // }
  // //跟踪API结束时间限制开始时间
  // function changeTraceStart(time: any) {
  //   return time.getTime() < new Date(form.addTime).getTime() //小于开始时间的不选
  // }

  //跟踪API开始时间限制结束时间
  function changeTraceEndUser(time: any) {
    return time.getTime() > new Date(reForm.endTime).getTime() //大于结束时间的不选
  }
  //跟踪API结束时间限制开始时间
  function changeTraceStartUser(time: any) {
    return time.getTime() < new Date(reForm.addTime).getTime() //小于开始时间的不选
  }

  //跟踪API开始时间限制结束时间
  function changeTraceEndSend(time: any) {
    return time.getTime() > new Date(sendForm.endTime).getTime() //大于结束时间的不选
  }
  //跟踪API结束时间限制开始时间
  function changeTraceStartSend(time: any) {
    return time.getTime() < new Date(sendForm.addTime).getTime() //小于开始时间的不选
  }

  onMounted(async () => {
    await doRefresh()
    // await getTableDepartments()
    // await adminLists()
  })
</script>

<style lang="less" scoped>
  :deep(.arco-table-cell-expand-icon) {
    justify-content: center;
  }
  :deep(.arco-table-td-content button) {
    padding: 0px !important;
    margin-right: 8px;
    background: none !important;
  }
  :deep(.arco-tabs-nav-tab) {
    background-color: var(--color-bg-1);
    padding: 20px 0;
    border-radius: 10px;
  }

  :deep(.arco-tabs-content::before) {
    height: 0px !important;
  }

  :deep(.arco-tabs-tab) {
    margin: 0 20px;
    padding: 0;
    padding-bottom: 5px;
  }

  :deep(.arco-tabs-nav::before) {
    position: static !important;
    height: 0px !important;
  }

  :deep(.arco-tabs-content) {
    padding-top: 20px;
  }

  .box {
    overflow: hidden; //超出的文本隐藏
    text-overflow: ellipsis; //用省略号显示
    white-space: nowrap;
  }

  .tabs {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 40px;
    margin-bottom: 20px;

    .button {
      box-sizing: border-box;
      padding-bottom: 5px;
    }
  }

  .action {
    color: #009dff;
    border-bottom: 3px solid #009dff;
  }

  .butten {
    padding: 0px 4px;
  }
</style>
